<script setup lang="ts">
import { ref } from 'vue';
import { App } from 'ant-design-vue';
import { GameKernel } from '../../../game';
import StarBackgroundContainer from '../components/star-background-container/index.vue';
import { MODEL_NAME } from '../../../game/constants/model-names';

const { message } = App.useApp();

const showExport = ref(false);
const exportData = ref('');

const showImport = ref(false);
const importData = ref('');

const isAddTag = ref(false);
/** 神识印记 */
const tag = ref('');

function initTag() {
  const saveData = GameKernel.inst.saveSystem.unzipAndDecryptSave(
    exportData.value
  );
  const username = saveData[MODEL_NAME.USER_INFO].username;
  if (username) {
    tag.value = `[${username}] 的印记`;
  } else {
    tag.value = '印记';
  }
}

function onExportClick() {
  exportData.value = localStorage.getItem('save') || '';
  initTag();
  showExport.value = true;
}

function onImportClick() {
  importData.value = '';
  showImport.value = true;
}

function onStartImportClick() {
  if (!importData.value) return;
  try {
    GameKernel.inst.load(importData.value);
    localStorage.setItem('save', importData.value);
    window.location.reload();
    showImport.value = false;
  } catch {
    message.error('导入失败，存档格式错误');
  }
}

async function onCopyClick() {
  if (!exportData.value) return;
  try {
    let exportString = exportData.value;
    if (isAddTag.value) {
      const saveData = GameKernel.inst.saveSystem.unzipAndDecryptSave(
        exportData.value
      );
      const saveTag: string[] = saveData[MODEL_NAME.USER_INFO].saveTag || [];
      saveTag.push(tag.value);
      saveData[MODEL_NAME.USER_INFO].saveTag = saveTag;
      exportString = GameKernel.inst.saveSystem.encryptAndZipSave(saveData);
    }
    await navigator.clipboard.writeText(exportString);
    message.success('已复制到剪贴板');
    showExport.value = false;
  } catch (err) {
    message.error('复制失败，请手动选择文本复制');
    console.error(err);
  }
}
</script>

<template>
  <a-card size="small" title="存档">
    <div class="flex gap-2">
      <a-button :block="true" @click="onExportClick">导出</a-button>
      <a-button :block="true" @click="onImportClick">导入</a-button>
    </div>
    <teleport to="body">
      <star-background-container v-if="showExport">
        <div
          class="h-10 flex-none flex items-center justify-center w-full relative"
        >
          <span class="text-base font-bold">导出存档</span>
          <div class="absolute left-2">
            <a-button @click="showExport = false">关闭</a-button>
          </div>
        </div>
        <div class="flex-1 h-full overflow-auto p-2">
          <a-textarea
            v-model:value="exportData"
            :readonly="true"
            style="resize: none; height: 100%"
          ></a-textarea>
        </div>
        <div class="flex-none flex items-center px-2 gap-2">
          <div class="flex-none">
            <a-checkbox v-model:checked="isAddTag">勾选会添加印记</a-checkbox>
          </div>
          <a-input
            v-model:value="tag"
            placeholder="勾选后印记不能为空"
          ></a-input>
        </div>
        <div class="flex-none flex items-center justify-end gap-2 p-2">
          <a-button
            :block="true"
            :disabled="!exportData || (isAddTag && !tag)"
            @click="onCopyClick"
            >复制</a-button
          >
        </div>
      </star-background-container>
    </teleport>
    <teleport to="body">
      <star-background-container v-if="showImport">
        <div
          class="h-10 flex-none flex items-center justify-center w-full relative"
        >
          <span class="text-base font-bold">导入存档</span>
          <div class="absolute left-2">
            <a-button @click="showImport = false">关闭</a-button>
          </div>
        </div>
        <div class="flex-1 h-full overflow-auto p-2">
          <a-textarea
            v-model:value.trim="importData"
            placeholder="粘贴存档字符串到此处"
            style="resize: none; height: 100%"
          ></a-textarea>
        </div>
        <div class="flex-none flex items-center justify-end gap-2 p-2">
          <a-button
            :block="true"
            :disabled="!importData"
            @click="onStartImportClick"
            >开始导入</a-button
          >
        </div>
      </star-background-container>
    </teleport>
  </a-card>
</template>
